import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { FormArray } from '@angular/forms';
import { FormlyFormOptions } from '@ngx-formly/core';
import { Events } from '@core/services/events/Events';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'apes-container',
  template: `

    <apes-relevancy-link [relevancy]="relevancy"></apes-relevancy-link>

    <apes-scrollPanel [apesStyle]="{width:apesWidth}" [apesClass]="apesPrefixCls">
      <div *ngIf="datas.length > 0" class="scroll-panel-div">
        <ng-container *ngFor="let data of datas; let i = index">
          <apes-box [data]="data" [height]="_height" [model]="model" [form]="form" [options]="options"></apes-box>
        </ng-container>
      </div>
      <ng-content></ng-content>
    </apes-scrollPanel>
  `,
  styles: [`
    .scroll-panel-div {
      padding: 8px 4px;
    }
  `],
})

export class ApesContainerComponent implements OnDestroy, OnInit, AfterViewInit {

  prefixCls = 'apes-container';

  scrollHost = 'scroll-host';

  @Input() set noScroll(v: boolean) {
    if (v) {
      this.scrollHost = 'no-scroll';
    }
  }


  @Input() model: any = {};

  @Input() datas: any[] = [];

  @Input() relevancy: any;

  @Input() form: FormArray;

  @Input() options: FormlyFormOptions = {};

  @Input() isDrawer: boolean = false;

  private _height: number | null = null;

  @Input() set height(v: number | null) {
    v = Number(v);
    this._height = (!isNaN(v) && v > 0) ? v : null;
  }

  get height(): number | null {
    return this._height;
  }

  @Input() apesPrefixCls: any;

  @Input() apesOffset: number = 0;

  @Input() apesHeight: string;
  @Input() apesWidth: string = '100%';

  time: any;

  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    protected events: Events,
    protected route: ActivatedRoute,
  ) {
  }

  ngOnInit(): void {

  }

  ngOnDestroy(): void {

  }

  ngAfterViewInit() {
    this.setContentHeight();

    this.events.subscribe('setContentHeight', () => {
      this.setContentHeight();
    });

  }


  setContentHeight() {
    // 获取 container 元素
    // // let content = document.querySelector('.content');
    // let apesContainer = document.querySelector('.apes-container');
    //
    // setTimeout(() => {
    // // let height = this.el.nativeElement['offsetHeight'] + 8;
    // // header:48,tabs:52,button:35,contentTop:8,contentBottom:8;
    // let apesContainerHeight = window.document.body['clientHeight'] - (48 + 52 + 35 + 8 + 8);
    // // this.renderer.setStyle(content, 'paddingTop', 35 + height + 'px');
    // this.renderer.setStyle(apesContainer, 'height', apesContainerHeight + 'px');
    // }, 100);

    let content;
    if (this.isDrawer) {
      content = document.querySelector('.apes-drawer-body');
    } else {
      content = document.querySelector('.content');
    }

    let contentHeight;
    let apesContainer = document.querySelector('.' + this.apesPrefixCls);
    // let apesContainerHeight;
    if (this.apesHeight) {
      // apesContainerHeight = this.apesHeight;
      contentHeight = this.apesHeight;
    } else {
      // apesContainerHeight = window.document.body[ 'clientHeight' ] - this.apesOffset +'px';
      // header:48,tabs:52,button:35,contentTop:8,contentBottom:8;
      // apesContainerHeight = window.document.body[ 'clientHeight' ] - (48 + 52 + 35 + 8 + 8) +'px';
      if (this.isDrawer) {
        contentHeight = content['clientHeight'] - 87 + 'px';
      } else {
        contentHeight = content['clientHeight'] - 82 + 'px'; // 58
      }

    }
    if (apesContainer != null) {
      if (this.time) {
        clearTimeout(this.time);
      }
      this.time = setTimeout(() => {
        this.renderer.setStyle(apesContainer, 'height', contentHeight);
      }, 100);
    }
  }
}
